<template>
  <div
    class="slider-container"
  >
    <div
      class="inner-container"
    >
      <slide-verify
        :l="40"
        :r="10"
        :w="336"
        :h="200"
        :imgs="imgs"
        slider-text="向右滑"
        @success="handleSuccess"
      />
      <el-button
        class="cancel-button"
        @click="handleClose"
      >
        取 消
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  'name': 'Slider',

  data () {
    return {
      'imgs': [require(`../../assets/SliderImages/slider (${Math.round(Math.random() * 72)}).jpg`)],
      'text': '向右滑',
    }
  },

  'methods': {
    'handleClose' () {
      this.$emit('close')
    },
    'handleSuccess' () {
      this.$emit('success')
    },
  },
}
</script>

<style scoped lang="scss">
.slider-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 400px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .inner-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 336px;

    .cancel-button {
      margin-top: 36px;
      width: 100%;
    }
  }
}
</style>
